<template>
    <div class="backgImage">
        <!-- 每日报警数 -->
        <div class="div1">
            <TitleView title="每日报警数" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <DataP :data="DataP"></DataP>
            </div>
        </div>
        <!-- 视频统计数据 -->
        <div class="div2">
            <TitleView title="视频统计数据" :titlemore="true" @titleClick="titleMoreClick"></TitleView>
            <div class=" pr20" style="height: 265px;">
                <DataM :data="DataM"></DataM>
            </div>
        </div>
        <!-- 报警管理 -->
        <div class="div3">
            <TitleView title="月产量查询" :titlemore="true" @titleClick="titleMoreClick"></TitleView>
            <div class="pr20 pl20" style="height: 265px;">
                <!-- <div class="flex div3_d_top">
                    <div class="div3_d_top_left">
                        <p class="div3_d_top_left_p">今日统计</p>
                        <div class="flex">
                            <div class="div3_d_top_left_d" v-for="item in DataB.today">{{ item }}</div>
                        </div>
                    </div>
                    <div class="div3_d_top_left">
                        <p class="div3_d_top_left_p">按月统计</p>
                        <div class="flex">
                            <div class="div3_d_top_left_d" v-for="item in DataB.month">{{ item }}</div>
                        </div>
                    </div>
                </div> -->
                <div class="div3_d_top_right">
                    <DataB :data="DataBs"></DataB>
                </div>
            </div>
        </div>
        <!-- 工控情况 -->
        <div class="div4">
            <TitleView title="工控情况" :titlemore="true" @titleClick="titleMoreClick"></TitleView>
            <div class="pr32 pl32 div4_d">
                <div class="div4_d_img3">
                    <p class="div4_d_img3_p">{{ DataD[0].number }}<span class="div4_d_img3_p_span">%</span> </p>
                    <p class="div4_d_img3_p1">{{ DataD[0].title }}</p>
                </div>
                <div class="div4_d_img4">
                    <p class="div4_d_img3_p">{{ DataD[1].number }}<span class="div4_d_img3_p_span">%</span> </p>
                    <p class="div4_d_img3_p1">{{ DataD[1].title }}</p>
                </div>
                <div class="div4_d_img5">
                    <p class="div4_d_img3_p">{{ DataD[2].number }}<span class="div4_d_img3_p_span">%</span> </p>
                    <p class="div4_d_img3_p1">{{ DataD[2].title }}</p>
                </div>
                <img class="div4_d_img1" src="@/assets/Data/m3.png" alt="">
                <img class="div4_d_img2" src="@/assets/Data/m3.png" alt="">

            </div>
        </div>
    </div>

</template>

<script>
import { over_right_view1, over_right_view2, over_right_view3, over_right_view4 } from '@/request/api.js'
import DataP from "./components/DataP"
import DataM from "./components/DataM"
import DataB from "./components/DataB"
import DataMImg1 from "@/assets/组 112.png"
import DataMImg2 from "@/assets/组 112(1).png"
import DataMImg3 from "@/assets/组 112(2).png"
import DataMImg4 from "@/assets/组 112(3).png"

export default {
    components: {
        DataM, DataP, DataB
    },
    data() {
        return {
            DataP: {
                title: "总数",
                number: "10122",
                unit: "个",
                key: "right"
            },
            DataM: [
                {
                    src: DataMImg1,
                    title: "监控点总数",
                    number: "0",
                    unit: "",
                    key: "encodeDeviceTotal"
                }, {
                    src: DataMImg2,
                    title: "录像完成率",
                    number: "0",
                    unit: "",
                    key: "fullVideoRate"
                }, {
                    src: DataMImg3,
                    title: "设备在线率",
                    number: "0",
                    unit: "",
                    key: "monitorOnlineRate"
                }, {
                    src: DataMImg4,
                    title: "监控点在线率",
                    number: "0",
                    unit: "",
                    key: "deviceOnlineRate"
                },
            ],
            DataB: {
                today: "1021",
                month: "123500",
            },
            DataBs: [

            ],
            DataD: [{
                title: "回路投用率",
                number: "0"
            }, {
                title: "连锁率",
                number: "0"
            }, {
                title: "仪表完好率",
                number: "100"
            }]
        }
    },
    created() {
        this.getData()
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);

        },
        getData() {
            over_right_view1().then((res) => {
                console.log("res1:", res);
                this.DataP.number = res.data.data.toString()
            })
            over_right_view2().then((res) => {
                console.log("res2:", res);
                let datas = res.data
                this.DataM.forEach(elements => {
                    elements.number = datas[elements.key]
                })

            })
            over_right_view3().then((res) => {
                console.log("res3:", res);
                let datas = res.data[0]
                this.DataD[0].number = datas["回路投用率"].replace("%", "")
                this.DataD[1].number = datas["连锁率"].replace("%", "")
            })
            over_right_view4().then((res) => {
                console.log("4",res);
                this.DataBs=res.data
                
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.div1 {
    height: 150px;

    .div1_d {
        margin-top: 20px;
    }
}

.div2 {
    height: 250px;
}

.div3 {
    height: 284px;

    .div3_d_top {
        .div3_d_top_left {
            .div3_d_top_left_p {
                width: 200px;
                margin: 0;
                font-family: PingFang SC;
                font-weight: 100;
                font-size: 12px;
                color: #D0E5F5;

            }

            .div3_d_top_left_d {
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 18px;
                color: #FFFFFF;
                margin-top: 6px;
                width: 22px;
                height: 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: url("@/assets/sizeback2.png");
            }
        }


    }
}

.div4 {
    .div4_d {
        position: relative;
        width: 100%;
        height: 192px;

        .div4_d_img1 {
            width: 34px;
            height: 29px;
            position: absolute;
            top: 29px;
            left: 54px;
        }

        .div4_d_img2 {
            width: 34px;
            height: 29px;
            position: absolute;
            top: 37px;
            left: 273px;
        }

        .div4_d_img3 {
            position: absolute;
            top: 0;
            left: 86px;
            width: 197px;
            height: 170px;
            background: url("@/assets/Data/m1.png");
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .div4_d_img3_p {

                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 30px;
                color: #F89E29;
                text-align: center;
                margin: 0;
                margin-top: 20px;

                .div4_d_img3_p_span {
                    font-size: 15px;
                }
            }

            .div4_d_img3_p1 {
                margin: 0;
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #D0E5F5;
            }
        }

        .div4_d_img4 {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 115px;
            left: 19px;
            width: 94px;
            height: 81px;
            background: url("@/assets/Data/m2.png");
            background-size: 100% 100%;

            .div4_d_img3_p {
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 24px;
                color: #D0E5F5;
                margin: 0;

                .div4_d_img3_p_span {
                    font-size: 15px;
                }
            }

            .div4_d_img3_p1 {
                margin: 0;
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #D0E5F5;
            }
        }

        .div4_d_img5 {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 115px;
            left: 258px;
            width: 94px;
            height: 81px;
            background: url("@/assets/Data/m2.png");
            background-size: 100% 100%;

            .div4_d_img3_p {
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 24px;
                color: #D0E5F5;
                margin: 0;

                .div4_d_img3_p_span {
                    font-size: 15px;
                }
            }

            .div4_d_img3_p1 {
                margin: 0;
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #D0E5F5;
            }
        }
    }
}
</style>